<template>
  <div class="s-header">
    <div class="login-content">
      <ul v-if="!islogin">
        <li @click="headLogin"><span>登录</span></li>
        <li @click="headRegister"><span>注册</span></li>
      </ul>
      <ul v-else>
        <li>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              欢迎您，{{ username }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="修改密码">修改密码</el-dropdown-item>
                <el-dropdown-item command="退出登录">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </li>
      </ul>
    </div>
    <div class="headerTop">
      <div class="logo-content">
        <dsfimg :src="logoImg" :errorSrc="config.setting_img" />
      </div>
      <div class="data-content">
        <div class="text">
          <p>
            已开放:
            <span>{{ headDataState.fileOnlineNum }}</span>
            个文件,
            <span>{{ headDataState.dataJoinNum }}</span>
            个数据集,
            <span>{{ headDataState.interJoinNum }}</span>
            个API,
            <span>{{ headDataState.appTotalNum }}</span>
            个应用,
            <span>{{ headDataState.openSourceTotalNum }}</span>
            条数据项
          </p>
        </div>
        <div class="serch-content">
          <el-input v-model="serchValue" @keyup.enter="goSerch()" placeholder="请输入关键字查询目录名称"></el-input>
          <el-button @click="goSerch">
            高级搜索 |
            <i class="iconfont icon-sousuo"></i>
          </el-button>
        </div>
      </div>
    </div>
    <div class="menu-content">
      <ul>
        <li :class="{ act: active == index }" v-for="(d, index) in mentstate.menulist" :key="d.menuName"
          @click="navChange(d, index)">{{ d.menuName }}</li>
      </ul>
    </div>
    <LoginShade :shadeObj="shadeObj"></LoginShade>
    <RegisterShade :shadeObjReg="shadeObjReg"></RegisterShade>
    <ChangeWordShade :shadeObjWord="shadeObjWord"></ChangeWordShade>
  </div>
</template>
<script setup>
import emitter from "@/common/bus";
import logoImg from "@/assets/imgs/pc/sindex/logo4.png";
import { ref, reactive, onMounted, inject, watch, onUnmounted } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
const http = inject("ajax");
const config = inject("config");
const loginState = inject("loginState");

const route = useRouter();
let islogin = ref(false);
let username = ref("");

onMounted(() => {
  if (su.cook.getcookie("token") && su.cook.getcookie("token") != "") {
    islogin.value = true;
    username.value = su.cook.getcookie("username");
    route.isReady().then(() => {
      if (route.currentRoute.value.fullPath == "/") {
        active.value = 0;
      }
      // mentstate.menulist.push({
      //   menuName: "个人中心",
      //   url: "/My",
      // });
      // let ind = menulist.findIndex(item => item.url == route.currentRoute.value.path);
      // active.value = ind > -1 ? ind : -1; //反显让菜单选中
    });
  }
  //接收方，待兄弟组件调用
  emitter.on("changeW", data => {
    shadeObjWord.value.show = true;
  });
});

const routeContent = useRoute();

const serchValue = ref("");
const active = ref(-1); //默认都不选中，防止抖动

const menulist = [
  {
    menuName: "首页",
    url: "/sindex",
  },
  {
    menuName: "工作状态",
    url: "/workingCondition",
  },
  {
    menuName: "数据目录",
    url: "/DataDirectory",
  },
  {
    menuName: "APP应用",
    url: "/AppListPage",
  },
  {
    menuName: "互动交流",
    url: "/Interaction",
  },
  {
    menuName: "开放统计",
    url: "/OpenStatistics",
  },
  // {
  //   menuName: "个人中心",
  //   url: "/My",
  // },
  // {
  //   menuName: "在线地图",
  //   url: "/workingCondition",
  // },
];
let mentstate = reactive({
  menulist: menulist,
});
const navChange = (d, index) => {
  if (d.url == "/sindex") {
    active.value = index;
    route.push({ path: d.url });
    return;
  }
  loginState().then(() => {
    if (d.url) route.push(d.url);
    active.value = index;
  });
};
const goSerch = () => {
  if (serchValue.value != "") {
    active.value = -1;
    route.push({
      path: "/serch",
      query: {
        title: serchValue.value,
      },
    });
  } else {
    ElMessage({
      message: "请输入内容",
      type: false,
    });
  }
};

onMounted(() => {
  getDate();
});
let headData = {};
let headDataState = ref(headData);

const getDate = () => {
  http("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/getTotalNum", {}, "GET")
    .then(res => {
      headDataState.value = res.data[0];
    })
    .catch(err => {
      console.log(err.message || "数据异常");
    });
};

let shade = { show: false };
let shadeObj = ref(shade);

let shadeReg = { show: false };
let shadeObjReg = ref(shadeReg);

let shadeWord = { show: false };
let shadeObjWord = ref(shadeWord);

const headLogin = () => {
  console.log("显示登录弹框");
  shadeObj.value.show = true;
};
const headRegister = () => {
  console.log("显示注册弹框");
  shadeObjReg.value.show = true;
};

const handleCommand = command => {
  console.log(1);

  if (command == "修改密码") {
    console.log("显示修改密码弹框");
    shadeObjWord.value.show = true;
  } else if (command == "退出登录") {
    console.log("退出登录");
    su.cook.clearCookie();
    location.href = "./";
  }
};

// 当路由变化时，让对应的菜单选中
watch(
  () => routeContent.path,
  (newPath, oldPath) => {
    console.log(newPath);
    let ind = mentstate.menulist.findIndex(item => item.url == newPath);
    active.value = ind > -1 ? ind : -1; //反显让菜单选中
    if (routeContent.path == "/serch") serchValue.value = routeContent.query.title;
    else serchValue.value = "";
  },
  {
    // immediate: true, //默认执行一次，这里不需要
    // deep: true, //默认执行一次，这里不需要
  }
);

onUnmounted(() => {
  emitter.off("changeW"); //关闭
});
</script>
